<script setup>
import {ref, onMounted, toRef} from 'vue';
import {getCheckpointList, saveCheckpointList} from "src/utils/config";
import {Dialog} from "quasar";
import UploadImage from "components/UploadImage.vue";
import {nanoid} from "nanoid";

const props = defineProps(['code'])
const checkpoint_list = ref([])
const checkpoint = ref({})

// table config
const columns = ref([
  {
    name: "name",
    label: "名称",
    align: "left",
    field: "name",
  },
  {
    name: "code",
    label: "编码",
    align: "left",
    field: "code",
  },
  {
    name: "sort",
    label: "排序",
    align: "left",
    field: "sort",
    sortable: true,
  },
  {
    name: "memo",
    label: "说明",
    align: "left",
    field: "memo",
  },
  {
    name: "gps",
    label: "gps",
    align: "left",
    field: "gps",
  },
  {
    name: "pic",
    label: "图片",
    align: "left",
    field: "pic",
  },
  {
    name: "pic2",
    label: "图片2",
    align: "left",
    field: "pic2",
  },
  {
    name: "action",
    align: "left",
    label: "Action",
    field: "action",
  }
])

const pagination = ref({
  rowsPerPage: 20,
})

const viewCustomer = ref(false)

// const groupOptions = ref()

onMounted(() => {
  // console.log('code', props.code)
  const list = getCheckpointList()
  let temp_list = []
  list.forEach(function (checkpoint, index) {
    if (checkpoint.group === props.code) {
      temp_list.push(checkpoint)
    }
  })
  checkpoint_list.value = temp_list
  // console.log('checkpoint list', temp_list)
})

function addPointInfo() {
  const list = getCheckpointList()
  const newData = {
    id: nanoid(),
    code: "9999",
    name: "新场地",
    memo: "",
    sort: 99,
    status: 0,
    pic: "",
    pic2: "",
    gps: "",
    display: false,
    group: props.code,
  }

  // 保存到本地数据
  list.push(newData)
  saveCheckpointList(list)

  // 添加到当前页面数据
  checkpoint_list.value.push(newData)

  // 显示新数据
  Dialog.create({
    title: '提示',
    message: '添加成功，请修改相应数据',
    persistent: true
  }).onOk(() => {
    checkpoint.value = newData
    viewCustomer.value = true
  })
}


function editCheckpoint(e) {
  // console.log('checkpoint', e)
  checkpoint.value = e
  viewCustomer.value = true
}

function removeCheckpoint(e) {
  Dialog.create({
    title: '提示',
    message: '你确定要删除吗？',
    cancel: true,
    persistent: true
  }).onOk(() => {

    // 删除当前列表
    for (let index = 0; index < checkpoint_list.value.length; index++) {
      if (checkpoint_list.value[index] === e) {
        // console.log(index, e.index)
        checkpoint_list.value.splice(index, 1)
        break
      }
    }

    // 删除本地列表
    const list = getCheckpointList()
    for (let index = 0; index < list.length; index++) {
      if (list[index].id === e.id) {
        list.splice(index, 1)
        break
      }
    }

    // 保存本地列表
    saveCheckpointList(list)

  })
}


function toRefs(obj) {
  const ret = {}
  // 使用for...in 循环遍历对象
  for (const key in obj) {
    // 逐个调用toRef完成转换
    ret[key] = toRef(obj, key).value
  }
  return ret
}

function onSaveCheckpoint() {
  const temp_info = {...toRefs(checkpoint.value)}
  const list = getCheckpointList()
  // console.log('onSaveCheckpoint')
  // console.log(checkpoint)
  // console.log(temp_info)

  // 修改本地列表
  for (let index = 0; index < list.length; index++) {
    if (list[index].id === temp_info.id) {
      list[index] = temp_info

      // 将排序字段转换为数字
      list[index].sort = parseInt(temp_info.sort)
      break
    }
  }

  // 保存本地列表
  saveCheckpointList(list)

  viewCustomer.value = false
}

function onResetInfo() {
  // TODO:待完成

}


</script>


<template>
  <q-page class="q-pa-md">
    <q-table title="场地管理" :rows="checkpoint_list" :columns="columns" v-model:pagination="pagination">

      <template v-slot:top-right>
        <q-btn @click="addPointInfo()" color="purple" class="q-mr-xs" label="添加场地"/>
      </template>

      <template v-slot:body-cell-pic="props">
        <q-td :props="props">
          <q-img :src="props.row.pic" style="max-width: 100px"></q-img>
        </q-td>
      </template>

      <template v-slot:body-cell-pic2="props">
        <q-td :props="props">
          <q-img :src="props.row.pic2" style="max-width: 100px"></q-img>
        </q-td>
      </template>

      <template v-slot:body-cell-action="props">
        <q-td :props="props">
          <div class="q-gutter-sm">
            <q-btn dense outline size="sm" color="primary" icon="edit" @click="editCheckpoint(props.row)"/>
            <q-btn dense outline size="sm" color="red" icon="delete" @click="removeCheckpoint(props.row)"/>
          </div>
        </q-td>
      </template>
    </q-table>

    <q-dialog v-model="viewCustomer">
      <q-card bordered class="my-card">
        <q-card-section class="bg-primary text-white full-width">
          <div class="text-h6 q-px-md">编辑数据</div>
        </q-card-section>

        <q-separator class="q-px-md" inset></q-separator>

        <q-card-section class="q-pt-md full-width">
          <q-list>
            <q-item>
              <q-item-section>
                <q-input v-model="checkpoint.code" label="编码"/>
              </q-item-section>
            </q-item>

            <q-item>
              <q-item-section>
                <q-select v-model="checkpoint.group"
                          :options="[ { label: '主线', value: 'MAIN' }, { label: '支线', value: 'SUB' } ]" label="分组"
                          emit-value map-options/>
              </q-item-section>
            </q-item>

            <q-item>
              <q-item-section>
                <q-input v-model="checkpoint.name" label="名称"/>
              </q-item-section>
            </q-item>

            <q-item>
              <q-item-section>
                <q-input v-model="checkpoint.gps" label="GPS"/>
              </q-item-section>
            </q-item>

            <q-item>
              <q-item-section>
                <q-input type="number" v-model="checkpoint.sort" label="排序"/>
              </q-item-section>
            </q-item>

            <q-item>
              <q-item-section>
                <q-input v-model="checkpoint.memo" label="说明"/>
              </q-item-section>
            </q-item>
          </q-list>
        </q-card-section>

        <q-card-section class="q-pt-md full-width">
          <upload-image v-model="checkpoint.pic" title="未启用图"></upload-image>
        </q-card-section>

        <q-card-section class="q-pt-md full-width">
          <upload-image v-model="checkpoint.pic2" title="启用状态"></upload-image>
        </q-card-section>

        <q-card-actions align="right">
          <q-btn color="primary" @click="onSaveCheckpoint">保存</q-btn>
        </q-card-actions>
      </q-card>
    </q-dialog>
  </q-page>
</template>

<style lang="sass" scoped>
.my-card
  width: 100%
  max-width: 900px
</style>
